import { Tabs } from "antd";
import { useState, useEffect } from "react";
import { useNavigate, NavLink } from "react-router-dom";
import mmd from "../../assets/logo.jpg";
import "./home.css"
import Cai from "../../views/cai/cai"
import Zhang from "../../views/zhang/zhang"

function Home() {
  const [activeKey, setActiveKey] = useState("1");
  const navigate = useNavigate();
  function logout() {
    // 清理状态管理和本地登录状态
    localStorage.removeItem("token", "");
    // 如果当前是购物车页就跳回到主页
    navigate("/login");
  }
  return (
    <div>
      <header>
        <img src={mmd} alt="" />
       <h3 className="hh">中国移动边缘UPF设备配置及报价系统</h3> 
        
        <div className="quanxian">
          <span>管理用户</span>
          <span>修改密码</span>
          <span onClick={logout}>退出登录</span>
        </div>
      </header>
      <Tabs
        activeKey={activeKey}
        onChange={setActiveKey}
        tabPosition="left"
        tabBarStyle={{
          height: "90vh",
          lineHeight: "200px",
          textAlign: "center",
          // writingMode: "vertical-rl",
          // textOrientation: "upright",
        }}
      >
        <Tabs.TabPane tab="园区UPF" key="1">
         <Cai />
        </Tabs.TabPane>
        <Tabs.TabPane tab="地市共享UPF" key="2">
          <Zhang></Zhang>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}
export default Home;
